<template>
  <div>
    <headTop></headTop>
    <div style="margin-top: 50px; margin-left: 250px">
      <el-timeline>
        <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :color="activity.color"
            :timestamp="activity.timestamp"
            placement="top">
          {{activity.content}}
        </el-timeline-item>
      </el-timeline>
    </div>
    <div  style="text-align: center; margin-top: 20px">
    <h3 style="color: #42b983">本网站可以满足您孩子学习的任何需求！</h3>
      <p style="color: #42b983">如果您觉得网站不错可以请作者喝咖啡</p>
    </div>
  </div>
</template>

<script>
import headTop from '@/component/headTop';

export default {
  name: 'explain',
  components: {
    headTop,
  },
  data(){
    return {
      activities: [{
        content: '1-5加减法，6-10加减法，20以内进位加法',
        timestamp: '一年级上',
        color: '#0bbd87'
      }, {
        content: '20以内退位减法，100以内加法和减法',
        timestamp: '一年级下',
        color: '#0bbd87'
      }, {
        content: '100以内加法，表内乘法一，表内乘法二',
        timestamp: '二年级上',
        color: '#0bbd87'
      }, {
        content: '表内除法一，表内除法二，混合运算有余数的除法',
        timestamp: '二年级下',
        color: '#0bbd87'
      }, {
        content: '万以内加法和减法，一万以内加法和减法，二多位数乘一位数分数的初步认识',
        timestamp: '三年级上',
        color: '#0bbd87'
      }, {
        content: '除数是一位数的除法，两位数乘两位数',
        timestamp: '三年级下',
        color: '#0bbd87'
      }]
    }
  }
}
</script>


<style lang="less">
@import "../style/mixin";
.data_section {
  padding: 20px;

  .section_title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
  }

  .data_list {
    text-align: center;
    font-size: 14px;

    .data_num {
      color: #333;
      font-size: 26px;
    }
  }
}
</style>
